import QtQuick
import FluentUI
import QtQuick.Controls

// 首页文字和个人中心按钮
Row {
    id: homeTopRow
    anchors.left: parent.left
    anchors.right: parent.right
    z: 1

    // 文字部分
    Column {
        anchors.left: parent.left
        Text {
            id: textWeclome
            text: "欢迎回来，面试系统"
            font.pointSize: 9 * fontSizeFactor
            font.family: "MiSans"
            color: "#7D8592"
        }
        Text {
            id: textShouYe
            text: "首页"
            font.pointSize: 22 * fontSizeFactor
            font.family: "MiSans"
            color: "#0A1629"
        }
    }

    // 个人中心按钮
    FluRectangle {
        y: textWeclome.height
        anchors.right: parent.right
        radius: [15, 15, 15, 15]
        width: mainWindow.width * 0.18
        height: textShouYe.height
        color: "#FFFFFF"
        z: 1
        Row {
            anchors.fill: parent
            // 占位
            Rectangle {
                width: parent.width * 0.15
                height: parent.height
                color: "transparent"
            }
            FluClip {
                anchors.verticalCenter: parent.verticalCenter
                radius: [width / 2, width / 2, width / 2, width / 2]
                width: parent.width * 0.15
                height: parent.width * 0.15
                FluImage {
                    anchors.fill: parent
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/image/image/profile.png"
                }
            }
            // 占位
            Rectangle {
                width: parent.width * 0.08
                height: parent.height
                color: "transparent"
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: "测试账号"
                font.pointSize: 9 * fontSizeFactor
                font.family: "MiSans"
                color: "#0A1629"
            }
            // 占位
            Rectangle {
                width: parent.width * 0.3
                height: parent.height
                color: "transparent"
            }
            FluImage {
                anchors.verticalCenter: parent.verticalCenter
                height: parent.height * 0.2
                fillMode: Image.PreserveAspectFit
                source: "qrc:/image/image/DropdownArrow.png"
            }
        }

        // 个人中心菜单
        FluRectangle {
            id: personalCenterMenu
            x: 0 - parent.width * 0.2
            y: parent.height
            width: parent.width * 1.2
            height: parent.height * 7
            visible: false
            radius: [15, 15, 15, 15]
            color: "#FFFFFF"
            z: 1

            Column {
                anchors.fill: parent

                //占位
                Rectangle {
                    width: parent.width
                    height: parent.height * 0.05
                    color: "transparent"
                }

                Text {
                    x: parent.height * 0.05
                    text: "通知"
                    font.pointSize: 12 * fontSizeFactor
                    font.family: "MiSans"
                    color: "#0A1629"
                }

                //占位
                Rectangle {
                    width: parent.width
                    height: parent.height * 0.05
                    color: "transparent"
                }
                FluRectangle {
                    width: parent.width
                    height: parent.height * 0.2
                    color: "#F9FAFB"

                    Text {
                        text: "您刚刚完成了一场模拟面试"
                        anchors.centerIn: parent
                        font.pointSize: 9 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#7D8592"
                    }
                    Rectangle {
                        width: parent.width
                        height: 1
                        anchors.bottom: parent.bottom
                        color: "#EEEFF2"
                    }
                }

                FluRectangle {
                    width: parent.width
                    height: parent.height * 0.2
                    color: "#F9FAFB"

                    Text {
                        text: "您刚刚完成了刷了200道题"
                        anchors.centerIn: parent
                        font.pointSize: 9 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#7D8592"
                    }
                    Rectangle {
                        width: parent.width
                        height: 1
                        anchors.bottom: parent.bottom
                        color: "#EEEFF2"
                    }
                }

                FluRectangle {
                    width: parent.width
                    height: parent.height * 0.2
                    color: "#FFFFFF"

                    Text {
                        text: "您的转化等级升至3级"
                        anchors.centerIn: parent
                        font.pointSize: 9 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#7D8592"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        anchors.bottom: parent.bottom
                        color: "#EEEFF2"
                    }
                }

                //占位
                Rectangle {
                    width: parent.width
                    height: parent.height * 0.05
                    color: "transparent"
                }
                FluRectangle {
                    width: parent.width
                    height: parent.height * 0.1
                    Row {
                        anchors.fill: parent
                        //占位
                        Rectangle {
                            width: parent.width * 0.1
                            height: parent.height
                            color: "transparent"
                        }
                        FluImage {
                            anchors.verticalCenter: parent.verticalCenter
                            height: parent.height * 0.45
                            fillMode: Image.PreserveAspectFit
                            source: "qrc:/image/image/Read.png"
                        }
                        FluTextButton {
                            text: "全部标记已读"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            textColor: "#3F8CFF"
                            anchors.verticalCenter: parent.verticalCenter
                            onClicked: {
                            }
                        }

                        //占位
                        Rectangle {
                            width: parent.width * 0.08
                            height: parent.height
                            color: "transparent"
                        }
                        FluTextButton {
                            text: "查看全部通知"
                            font.pointSize: 9 * fontSizeFactor
                            font.family: "MiSans"
                            textColor: "#3F8CFF"
                            anchors.verticalCenter: parent.verticalCenter
                            onClicked: {
                            }
                        }
                    }
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onPressed: {
                personalCenterMenu.visible = !personalCenterMenu.visible;
                dimOverlay.visible = !dimOverlay.visible;
            }
        }

        // 透明遮罩
        Rectangle {
            id: dimOverlay
            width: mainWindow.width * 2
            height: mainWindow.height
            x: 0 - parent.parent.width
            y: 0 - parent.height
            color: "#26364D"
            opacity: 0.4
            visible: false
        }
    }
}
